<template>
  <div>
    <selectProvinceNav :provinceList="provinceList" />
    <el-scrollbar>
      <div id="optional">
        <div class="main">
          <div class="scheme">
            <h1>三大维度生成选科方案</h1>
            <span class="f12"
              ><span
                >数据来源：《{{
                  store.getters.user.newSelectSubjectData.provinceName ||
                  store.getters.user.userInfo.province
                }}招生普通高校专业(类)选考科目范围》</span
              ><span class="detl curpoin" @click="handleGoPolicy"
                >详细政策 ></span
              ></span
            >
          </div>
          <!-- 选科方案 -->
          <div class="subject-selection-box mt20 mb20">
            <div class="subject-selection mt20 mb20">
              <div class="f24 font-weight600 pl40 pt20">智能选科</div>
              <div class="pl40 f12">通过意向的院校和专业推荐选科方案</div>
              <el-button
                class="ml40 mt20"
                type="primary"
                @click="handleGoOptional('0')"
                >开始选科</el-button
              >
              <div class="isvip" v-if="store.getters.user.userInfo.isVIP == 0">
                vip
              </div>
            </div>
            <div class="subject-selection mt20 mb20" style="margin: 0 34px">
              <div class="f24 font-weight600 pl40 pt20">自主选科分析</div>
              <div class="pl40 f12">通过选科分析适合宝宝的院校和专业</div>
              <el-button
                class="ml40 mt20"
                type="primary"
                @click="handleGoOptional('1')"
                >开始分析</el-button
              >
              <div class="isvip" v-if="store.getters.user.userInfo.isVIP == 0">
                vip
              </div>
            </div>
            <div class="subject-selection mt20 mb20">
              <div class="f24 font-weight600 pl40 pt20">选考科目查询</div>
              <div class="pl40 f12">通过大学/专业维度查询选考科目要求</div>
              <el-button
                class="ml40 mt20"
                type="primary"
                @click="handleGoOptional('3')"
                >开始查询</el-button
              >
            </div>
            <div class="explain f12 text-color">
              <div style="margin-bottom: 10px">使用说明：</div>
              <div>
                1、本系统选科查询结果根据教育考试院发布“普通高校专业（类）选考科目范围”；
              </div>
              <div style="margin: 10px 0">
                2、用户应根据自己的兴趣特长、职业生涯规划和学习情况等，结合选考科目范围综合考虑，自主确定选考科目；
              </div>
              <div>
                3、因少量院校不定期进行学科专业调整，本系统选科推荐辅助参考。
              </div>
            </div>
          </div>

          <!-- 选科方案end -->

          <!-- 分析 -->
          <div class="analyse">
            <h1 class="analyse-title">
              {{ store.getters.user.defaultYear }}年{{
                store.getters.user.newSelectSubjectData.provinceName ||
                store.getters.user.userInfo.province
              }}选科大数据分析
            </h1>
            <div class="title-list">
              <div class="title-box">
                <div
                  class="title"
                  style="flex: 1"
                  v-for="item in matchingRatio?.major_subject"
                  :key="item.id"
                >
                  <div>{{ item.name }}</div>
                  <div class="border-top"></div>
                  <div>{{ item.percent }}</div>
                  <div>{{ item.percentView }}</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="combination-table"
            style="height: 280px"
            :class="{ isAllActive: isAllTableShow }"
          >
            <el-table :data="matchingRatio?.major_combine" style="width: 100%">
              <el-table-column type="index" label="序号" width="80" />
              <el-table-column prop="name" label="选科组合" width="180">
              </el-table-column>
              <el-table-column prop="percent" width="700">
                <template #default="scope">
                  <el-progress
                    :text-inside="true"
                    :stroke-width="24"
                    :percentage="scope.row.percent"
                    :color="progressColor"
                    status="success"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="count" label="匹配专业" />
              <el-table-column prop="percentView" label="匹配率" />
            </el-table>
          </div>
          <!-- 分析end -->
          <div class="f12 look-over" v-if="!isLookaLL">
            <div class="pointer df curpoin" @click="handleLookAll">
              <el-icon>
                <ArrowDown />
              </el-icon>
              <div class="text-primary">查看全部</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 政策详情 -->
      <DetailPolicy ref="policyRef" />
    </el-scrollbar>
    <!-- 判断是否是会员 -->
    <isVipDialog ref="isVipDialogShow" />
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';
import { getSelectProvince } from '@/api/provinces/province';
import DetailPolicy from './components/DetailPolicy';
import { getSelectMatchRatio } from '@/api/selectSubject/subject';
import isVipDialog from '@/components/Dialog/isVipDialog';
import bus from '@/utils/bus';
import SelectProvinceNav from '@/views/optional/components/SelectProvinceNav';

const requestData = ref({
  eduLevel: 'ben',
});
const store = useStore();
const route = useRouter();
const isLookaLL = ref(false);
const isAllTableShow = ref(false);
const policyRef = ref('');
const isVipDialogShow = ref('');
const provinceList = ref([]);
const progressColor = computed(() => {
  return [{ color: 'var(--color-text)' }];
});
const eduLevel = ref({
  eduLevel: 'ben',
});

bus.on('updataSelectMatchRatio', (data) => {
  requestData.value.pid = data.provinceCode;
  requestData.value.year = store.getters.user.newSelectSubjectData.year;
  fetchSelectMatchRatio();
});

// 院校匹配率
const fetchSelectMatchRatio = () => {
  getSelectMatchRatio(requestData.value).then((res) => {
    if (res.data.code == 20000) {
      matchingRatio.value = res.data.data;
      store.dispatch(
        'subject/changeCombine',
        matchingRatio.value?.major_combine[0].code,
      );
      // 院校
      let newObj1 = {
        code: '',
        count: '',
        name: '院校', //院校
        percent: res.data.data?.countCollege, // 院校
        percentV2: '',
        percentView: '',
      };
      // 专业
      matchingRatio.value?.major_subject.splice(0, 0, newObj1);
      let newObj2 = {
        code: '',
        count: '',
        name: '专业', //院校
        percent: res.data.data?.countMajor, // 专业
        percentV2: '',
        percentView: '',
      };
      matchingRatio.value?.major_subject.splice(1, 0, newObj2);
    }
  });
};

watch(
  () => store.getters.user.userInfo,
  (newVal) => {
    requestData.value.pid = newVal.pid;
    requestData.value.year = store.getters.user.defaultYear;
    fetchSelectMatchRatio();
  },
  { deep: true, immediate: true },
);

const fetchSelcetProvince = () => {
  getSelectProvince(eduLevel.value).then((res) => {
    if (res.data.code == 20000) {
      provinceList.value = res.data.data;
      let firstYear = provinceList.value.find(
        (item) => item.provinceCode == store.getters.user.userInfo.pid,
      );

      if (firstYear) {
        store.dispatch(
          'user/changeChangeProvinceYear',
          firstYear.years[0].year,
        );
        requestData.value.year =
          store.getters.user.provinceData.year || firstYear.years[0].year;
        localStorage.setItem('defultYear', firstYear.years[0].year);
        fetchSelectMatchRatio();
      }
    }
  });
};
fetchSelcetProvince();
const handleGoOptional = (type) => {
  if (
    store.getters.user.userInfo.xk_type == 3 &&
    store.getters.user.userInfo.pid == 33
  ) {
    localStorage.setItem('xk_type', '2'); // 优先处理特殊情况
  } else if (store.getters.user.userInfo.xk_type == 3) {
    localStorage.setItem('xk_type', '3');
  } else if (store.getters.user.userInfo.xk_type == 2) {
    localStorage.setItem('xk_type', '2');
  } else {
    localStorage.setItem('xk_type', '2'); // 默认情况
  }

  // 判断是否是会员
  if (type != 3 && store.getters.user.userInfo.isVIP == 0) {
    isVipDialogShow.value.openDialog();
    return;
  }
  route.push({ name: 'smartoptional', query: { type } });
};

// 匹配率
const matchingRatio = ref({});

const handleGoPolicy = () => {
  policyRef.value.handleVisibleShow();
};
const handleLookAll = () => {
  isLookaLL.value = true;
  isAllTableShow.value = true;
};
</script>

<style lang="scss" scoped>
#optional {
  height: calc(100vh - 85px);

  .title-box {
    display: flex;
    justify-content: space-between;
    margin: 10px auto;

    .province-box {
      color: var(--color-text);
    }

    .right {
      color: var(--color-text);
    }
  }

  .detl {
    color: var(--color-text);
  }

  .subject-selection {
    display: inline-block;
    width: 377px;
    height: 160px;
    background-color: #f2f2f2;
    border-radius: 4px;
    position: relative;
  }

  .analyse {
    .title-list {
      .title-box {
        height: 100px;
      }

      .border-top {
        border-top: 1px solid #ebeef5;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .combination-table {
    overflow: hidden;

    .combination-ttile-box {
      color: #808389;
    }
  }
}

.look-over {
  z-index: 999;
  width: 100%;
  position: relative;
  padding: 100px 0 15px 0;
  margin-top: -90px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(hsla(0, 0%, 100%, 0)),
    to(#fff)
  );
  background: linear-gradient(hsla(0, 0%, 100%, 0), #fff);
  color: var(--color-text);

  .pointer {
    justify-content: center;
  }

  .text-primary {
    margin: 0 3px;
  }
}

:deep(.el-table__row) {
  height: 60px !important;
}

.isAllActive {
  overflow: visible !important;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.isvip {
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
  height: 25px;
  color: #333;
  font-weight: 600;
  font-size: 10px;
  background-color: #fc9;
  padding: 0 2px;
  border-radius: 2px 8px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
